<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/flexible.js"></script>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="bagview">
        <div class="clounm">
            <div class="palnr l1">
                <div class="tjsb">
                    <ul>
                        <li>
                            <h4>2,190</h4>
                            <span>
                                <i></i> 设备总数
                            </span>
                        </li>
                        <li>
                            <h4>190</h4>
                            <span>
                                <i></i> 季度新增
                            </span>
                        </li>
                        <li>
                            <h4>3,001</h4>
                            <span>
                                <i></i> 运营设备
                            </span>
                        </li>
                        <li>
                            <h4>108</h4>
                            <span>
                                <i></i> 异常设备
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="palnr l2">
                <div id="gzsb" style="height: 100%;"></div>
            </div>
            <div class="palnr l3">
                <!-- 放点位分布统计 -->
                <div id="dwfb" style="height: 100%;"></div>
            </div>
        </div>
        <div class="clounm">
            <div class="palnr m1">
                <!-- 放航线模拟图 -->
                <div id="china-a" style="height: 100%;"></div>
            </div>
            <div class="palnr m2">
                <!-- 放柱状图 -->
                <div id="m2-zhu" style="height: 100%;"></div>
            </div>
        </div>
        <div class="clounm">
            <div class="palnr r1">
            <!-- 筛选 -->
            <div class="filter">
                <a class="active" style="font-size: 18px;">365天</a>
                <a style="color: aqua;">|</a>
                <a style="font-size: 18px;">90天</a>
                <a style="color: aqua;">|</a>
                <a style="font-size: 18px;">30天</a>
                <a style="color: aqua;">|</a>
                <a style="font-size: 18px;">24小时</a>
              </div>
              <!-- 数据 -->
              <div class="data">
                <div class="item">
                  <h4 style="color: #fff; font-size: .135417rem;">20,301,987</h4>
                  <span>
                    订单量
                  </span>
                </div>
                <div class="item">
                  <h4 style="color: #fff; font-size: .135417rem;">99834</h4>
                  <span>
                    销售额(万元)
                  </span>
                </div>
              </div>
            </div>
            <div class="palnr r2">
                <!-- 销售额统计 -->
                <div id="xsedtj" style="height: 100%;"></div>
            </div>
            <div class="r3-box">
                <div class="palnr r3">
                    <!-- 渠道分布 -->
                    <div id="qdfb" style="height: 100%;"></div>
                </div>
                <div class="palnr r3">
                    <!-- 一季度销售进度 -->
                    <div id="xsjd" style="height: 100%;"></div>
                </div>
            </div>
            <div class="palnr r4">
                <div id="qgrx" style="height: 100%;"></div>
            </div>
        </div>
    </div>
</body>
<script src="./js/china.js"></script>
<script src="./js/index.js"></script>

</html>